<script setup>
import Carousel from '../components/Carousel.vue';
import Display from '../components/Display.vue';
import Footer from '../components/Footer.vue';
import RightSidebar from '../components/RightSidebar.vue';
import Header from '../components/Header.vue';


</script>
<template>
  <!-- 导航 -->
  <Header/>

  <!-- 轮播图 -->
  <div class="carouselWrapper">
    <div class="carousel">
      <Carousel style="width: 80vw"></Carousel>
    </div>
  </div>
  <!--  商品展示 -->
  <Display></Display>
<!--右侧菜单-->
  <RightSidebar/>

  <!-- 页脚 -->
  <Footer></Footer>


</template>
<style>
.carouselWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel {
  width: 80vw;
}


</style>